<template>
  <div class="main">
    <div class="webim-demo">
      <el-container>
        <el-aside width="134px" style="border-right: 1px solid #e5e5e5;">
          <div class="left">
            <div class="title" :style="'background:' + previewObj.styleColor">
              <div><div class="logo"></div><span class="name">访客123</span></div>
              <div class="search">搜索最近联系人</div>
            </div>
            <div class="content">
              <div class="item1">
                <div class="shop-logo"></div><span>电商</span><span class="del">X</span>
              </div>
              <div class="item1">
                <div class="shop-logo"><i class="dot">6</i> </div><span>电商1</span><span class="date">20/02</span>
              </div>
              <div class="item1">
                <div class="shop-logo"></div><span>电商2</span><span class="date">20/02</span>
              </div>
              <div class="item1">
                <div class="shop-logo"><i class="dot">8</i></div><span>电商3</span><span class="date">20/02</span>
              </div>
              <div class="item1">
                <div class="shop-logo"></div><span>电商4</span><span class="date">20/02</span>
              </div>
            </div>
          </div>
        </el-aside>
        <el-container>
          <el-header style="padding: 0px;height: 38px">
            <div class="user-name">
              <div class="shop-logo"></div> <span>电商行业</span>
            </div>
          </el-header>
          <el-main style="padding: 0px;">
            <el-row class="content">
              <el-col :span="13" class="right-left">
                <div class="item1">没有聊天记录了</div>
                <div class="item2">--以下是新消息--</div>
                <div style="margin-top: 15px">
                  <div class="date">19-12-12 11:11:23</div>
                  <img class="avatar" src="../../../../../assets/img/config/avatar.png" alt="">
                  <p class="fl">亲亲，碎屏保换哦！</p>
                </div>
                <div style="float: right;margin-top: 15px;margin-bottom: 30px">
                  <div class="date" style="text-align: right;margin-right: 38px">19-12-12 11:11:25</div>
                  <img class="avatar" src="../../../../../assets/img/config/avatar.png" alt="" style="float: right;">
                  <p class="fr" :style="'background:' + previewObj.styleColor"><span v-bind:style="{ borderLeft: '5px solid' + previewObj.styleColor}"></span>请介绍以下电脑的性能！</p>
                </div>
                <div class="oper-btn">
                  <span>常见问题</span><span>如何退货</span>
                </div>
                <div class="icon">
                  <span class="iconfont icon-biaoqing"></span>
                </div>
                <div style="margin-top: 55px;text-align: left;padding-left: 10px;" v-if="advList.length !== 0">
                  <span class="adv">{{advList[0].advTitle}}</span>
                </div>
                <span class="send-btn" :style="'background:' + previewObj.styleColor">发送</span>
              </el-col>
              <el-col :span="11" class="right-right" style="border-left: 1px solid #e5e5e5;">
                <div class="main-right">
                  <div class="title-item2">商铺信息</div>
                  <div class="title-item1">我的订单</div>
                  <div :style="'color:' + previewObj.styleColor">正在咨询</div>
                </div>
                <div class="detail-msg">
                  <div class="content1">
                    <div class="image"></div>
                    <div>55英寸 AI声控 MEMC防抖 超薄全面屏， 4K超高清</div>
                    <div class="line"></div>
                    <div>平台价：<span class="pink">¥3,999</span></div>
                    <div>备注：随时随地-连接企业客户</div>
                  </div>
                  <div style="margin-top: 12px;border-bottom: 1px solid #d5d5d5;padding-bottom: 8px;text-align: center">最近浏览</div>
                  <div class="content2">
                    <div class="image"></div>
                    <div>
                      <div>超薄全面屏， 4K超高清</div>
                      <div>
                        <span class="pink">¥3,999</span>
                        <div class="send-btn">发送</div>
                      </div>
                    </div>
                  </div>
                  <div class="content2">
                    <div class="image"></div>
                    <div>
                      <div>超薄全面屏， 4K超高清</div>
                      <div>
                        <span class="pink">¥3,999</span>
                        <div class="send-btn">发送</div>
                      </div>
                    </div>
                  </div>
                  <div class="content2">
                    <div class="image"></div>
                    <div>
                      <div>超薄全面屏， 4K超高清</div>
                      <div>
                        <span class="pink">¥3,999</span>
                        <div class="send-btn">发送</div>
                      </div>
                    </div>
                  </div>
                </div>
              </el-col>
            </el-row>
          </el-main>
        </el-container>
      </el-container>
    </div>
    <span class="btn primary_btn1"
          v-if="previewObj.chatButtonLocation === 'bottom-left' || previewObj.chatButtonLocation === 'bottom-right'"
          :style="{ backgroundColor: previewObj.styleColor,left: previewObj.chatButtonLocation === 'bottom-left' ? previewObj.chatButtonSideMargin + 'px' : '',right: previewObj.chatButtonLocation === 'bottom-right' ? previewObj.chatButtonSideMargin + 'px' : ''}">
      <i class="iconfont" :class="[previewObj.btnIcon]"></i><span class="margin-l-5">{{previewObj.onlineText}}</span>
    </span>
    <span class="btn primary_btn2"
          v-if="previewObj.chatButtonLocation === 'side-right' || previewObj.chatButtonLocation === 'side-left'"
          :style="{ backgroundColor: previewObj.styleColor, bottom: previewObj.chatButtonBottomMargin + 'px',left: previewObj.chatButtonLocation === 'side-left' ? '0px' : '',right: previewObj.chatButtonLocation === 'side-right' ? '0px' : ''}">
      <i class="iconfont" :class="[previewObj.btnIcon]"></i><span class="margin-l-5">{{previewObj.onlineText}}</span>
    </span>
    <span class="btn primary-btn3"
          v-if="previewObj.chatButtonLocation === 'circle-right' || previewObj.chatButtonLocation === 'circle-right'"
          :style="{ backgroundColor: previewObj.styleColor, bottom: previewObj.chatButtonBottomMargin + 'px', left: previewObj.chatButtonLocation === 'circle-left' ? previewObj.chatButtonSideMargin + 'px' : '', right: previewObj.chatButtonLocation === 'circle-right' ? previewObj.chatButtonSideMargin + 'px' : ''}">
      <i class="iconfont" :class="[previewObj.btnIcon]"></i>
    </span>
    <!--<el-button type="primary" class="primary_btn"><i class="iconfont" :class="[previewObj.btnIcon]"></i><span>咨询客服</span></el-button>-->
  </div>
</template>
<script>
  export default {
    name: 'webImDemo',
    data () {
      return {
        ad: '广告'
      }
    },
    props: {
      advList: Array,
      previewObj: {
        type: Object,
        default: function () {
          return {}
        }
      }
    }
  }
</script>
<style lang="stylus" scoped>
@import "../../../../../assets/common.styl"
.margin-l-5
  margin-left 5px
.btn
  position: absolute;
  color #fff
  border-radius 4px
  font-size: 12px;
  text-align: center;
.primary-btn3
  display: block;
  width: 28px;
  height: 28px;
  color: #fff;
  text-align: center;
  line-height: 28px;
  border-radius: 50%;
.primary_btn2
  width: 22px;
  padding: 10px 6px;
.primary_btn1
  bottom: 10px;
  display: inline-block;
  padding: 0 10px;
  height: 30px;
  line-height: 30px;
.main
  width 100%
  height 100%
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  position relative
.webim-demo
  width 550px
  height 377px
  box-shadow: 0px 2px 24px 0px rgba(24,28,40,0.18);
  .content2
    padding 10px 7px
    position relative
    border-bottom 1px solid #e5e5e5
    padding-bottom 10px
    .send-btn
      position: absolute;
      right: 5px;
      bottom: 3px;
      border: 1px solid #e5e5e5;
      padding: 3px 7px;
      border-radius: 4px;
    .image
      float: left;
      height: 40px;
      width: 40px;
      background-color: #ccc
      margin-right 5px
  .content1
    padding 5px
    background-color #f7f4f8
    .pink
      color $c-pink
    .image
      float: left;
      height: 40px;
      width: 40px;
      background-color: #ccc
      margin-right 5px
    .line
      width 100%
      height 1px background-color #E5E5E5
  .detail-msg
    clear both
    padding-top 3px
  .main-right
    div
      float left
      padding 8px 7px
    .title-item1
      border-right: 1px solid #e5e5e5;
      border-bottom 1px solid #e5e5e5
      background-color #f7f6f9
    .title-item2
      border-bottom 1px solid #e5e5e5
      background-color #f7f6f9
  .shop-logo
    width 25px
    height 25px
    position relative
    background-color: #babdbb;
    float: left;
    margin-right: 7px;
    border-radius: 50%;
    margin-top -3px
  .left
    float left
    width 100%
    height 380px
    .dot
      background-color: #f56c6c;
      border-radius: 50%;
      color: #fff;
      font-size: 10px;
      padding: 0 6px;
      text-align: center;
      position: absolute;
      white-space: nowrap;
      top: -9px;
      right: -9px;
      border: 1px solid #fff;
    .item1
      border-bottom 1px solid #E5E5E5
      padding 10px 7px
      position relative
    .del
      color $c-pink
      position absolute
      right 10px
      font-size 14px
      font-weight bold
    .date
      color #999
      position absolute
      right 10px
    .logo
      width: 25px;
      height: 25px;
      background-color: #fff;
      float: left;
      margin-right: 10px;
      border-radius: 50%;
    .title
      padding 8px
      .name
        color #fff
        line-height 25px
    .search
      margin-top 7px
      -webkit-appearance: none;
      background-color: #FFF;
      background-image: none;
      border-radius: 4px;
      border: 1px solid #DCDFE6;
      box-sizing: border-box;
      color: #606266;
      display: inline-block;
      font-size: inherit;
      height: 20px;
      line-height: 20px;
      outline: 0;
      padding: 0 15px;
      -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
      transition: border-color .2s cubic-bezier(.645,.045,.355,1);
      width: 100%;
  .user-name
    background-color: #f7f7f7;
    padding: 10px 0px;
    border-bottom: 1px solid #e5e5e5;
    .shop-logo
      margin-left 10px
  .right-left
    position relative
    text-align center
    .send-btn
      color #fff
      padding 5px 10px
      position absolute
      right 15px
      bottom 0px
    .adv
      text-decoration: underline;
      color: #888;
      width: 120px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    .icon
      text-align: left;
      padding-left: 10px
      color #888A92
      span
        line-height 20px
    .oper-btn
      clear both
      padding-bottom: 5px;
      border-bottom: 1px solid #E5E5E5;
      span
        line-height 25px
        padding 3px 10px
        box-shadow:0px 0px 8px 0px rgba(0,38,87,0.1);
        border-radius:18px
        margin-right 10px
    .date
      text-align: left;
      margin-left: 38px;
      color: #999;
    .item1
      color #B8B8B8
      margin-top 10px
    .item2
      color #999
      margin-top 10px
    .avatar
      width: 30px
      border-radius: 50%
      float: left
      margin: 1px 10px 0 0 !important
    .fl
      height 30px
      background $c-border2
      line-height 30px
      padding 0 6px
      border-radius 4px
      position relative
    .fl:before
      display block
      content ""
      width 0
      height 0
      border-right 5px solid $c-border2
      border-top 4px solid transparent
      border-bottom 4px solid transparent
      position absolute
      left -5px
      top 10px
    .fr
      height: 30px;
      line-height: 30px;
      padding: 0 6px;
      margin-right: 10px;
      border-radius: 4px;
      position: relative;
      margin-top: 0px;
      color: #fff;
      span
        display: block;
        width: 0;
        height: 0;
        border-top: 4px solid transparent;
        border-bottom: 4px solid transparent;
        position: absolute;
        right: -5px;
        top: 9px;
</style>
